<template>
  <div class="search-container">
    <!-- 顶部搜索栏 -->
    <!-- Tips: 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮 即在手机键盘上会显示搜索按钮 -->
    <form class="search-form" action="/">
  <van-search
    v-model="searchText"
    show-action
    background="#3296fa"
    placeholder="请输入搜索关键词"
    @search="onSearch"
    @cancel="onCancel"
    @focus="isResultShow=false"
  />
      <!-- /顶部搜索栏 -->
  <!-- 搜索结果 -->
       <search-result 
       :search-text="searchText"
       v-if="isResultShow"></search-result>
      <!-- /搜索结果-->
       <!-- 联想建议 -->
      <search-suggestion 
      :search-text="searchText"
      @search="onSearch"
      v-else-if="searchText.trim()"></search-suggestion>
      <!-- /联想建议 -->
      <!-- 搜索历史纪录 -->
      <search-history v-else></search-history>
      <!-- /搜索历史纪录 -->
     
    
</form>
  </div>
</template>

<script>

import SearchSuggestion from '@/views/search/component/search-suggestion.vue'
import SearchHistory from '@/views/search/component/search-history.vue'
import SearchResult from '@/views/search/component/search-result.vue'
export default {
  name: 'SearchIndex',
components:{
SearchSuggestion,
SearchHistory,
SearchResult 
},
  data() {
    return {
       searchText: '',//搜索关键词
       isResultShow:false//控制搜索结果的展示
    };
  },

  mounted() {
    
  },

  methods: {
      onSearch(val) {
        // console.log(val);
        this.searchText=val//点击搜索建议 文本框也得变成相应的值
this.isResultShow=true
    },
    onCancel() {
      this.$router.back()
    },
  },
};
</script>

<style lang="less" scoped>
.search-container{
  padding-top: 108px;
  .van-search__action{
    color:white;
  }
  .search-form{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
  }
}
</style>